﻿@page "/GridHTMLDecoration"
@inject WeatherForecastService ForecastService

<div class="demo-description mw-1100">
    <h2>Data Grid - HTML Decoration</h2>
    <p>
        HTML decoration allows you to color data grid cells, rows and columns according to their values. <br />The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> includes the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.HtmlRowDecoration">HtmlRowDecoration</a> and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.HtmlDataCellDecoration">HtmlDataCellDecoration</a> events that highlight grid rows and cells via the following arguments:
    </p>
    <ul>
        <li><b>CssClass</b> - A name of a CSS class applied to a grid element.</li>
        <li><b>Attributes</b> - Standard HTML attributes applied to a grid element.</li>
        <li><b>Style</b> - A standard HTML style attribute applied to a grid element.</li>
    </ul>
    <p>Events also have arguments that depend on a target grid element (a row or a cell). The most commonly-used arguments are:</p>
    <ul>
        <li><b>DataItem</b> - A data source item that corresponds to the processed row or a row that contains the processed cell.</li>
        <li><b>VisibleIndex</b>, <b>RowVisibleIndex</b> - The visible index of the processed row or of a row that contains the processed cell, respectively.</li>
        <li><b>Field</b> - A name of a data source field that supplies data for a column. This argument is used for cells only.</li>
    </ul>

</div>

@if (Orders == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <DxDataGrid Data="@Orders"
                ShowPager="false"
                ShowGroupPanel="false"
                HtmlRowDecoration="@OnHtmlRowDecoration"
                HtmlDataCellDecoration="@OnHtmlDataCellDecoration"
                CssClass="mw-1100 grid-border-0 grid-header-border-bottom-1">
        <DxDataGridColumn Field="@nameof(Order.Product)">
        </DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(Order.OrderID)">
        </DxDataGridColumn>
        <DxDataGridDateEditColumn Field="@nameof(Order.OrderDate)"
                                  DisplayFormat="D"
                                  Width="240px">
        </DxDataGridDateEditColumn>
        <DxDataGridDateEditColumn Field="@nameof(Order.ShippedDate)"
                                  DisplayFormat="D"
                                  Width="240px">
        </DxDataGridDateEditColumn>
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitPrice)"
                                  DisplayFormat="c"
                                  Width="120px">
        </DxDataGridSpinEditColumn>
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitsInOrder)"
                                  Width="140px">
        </DxDataGridSpinEditColumn>
    </DxDataGrid>

    <CodeSnippet_Grid_HTMLDecoration></CodeSnippet_Grid_HTMLDecoration>

}
@code {
    IEnumerable<Order> Orders;

    protected override async Task OnInitializedAsync()
    {
        Orders = await OrderRepository.LoadDataPreset();
    }

    const decimal largeOrder = 100;
    void OnHtmlRowDecoration(DataGridHtmlRowDecorationEventArgs<Order> eventArgs)
    {
        if (eventArgs.VisibleIndex % 2 == 1)
            eventArgs.CssClass = " table-dark";
        if (eventArgs.DataItem != null && eventArgs.DataItem.UnitsInOrder > largeOrder)
            eventArgs.CssClass = " table-warning font-weight-bold";
        else
            eventArgs.Attributes.Add("data-low-price", "");
    }
    void OnHtmlDataCellDecoration(DataGridHtmlDataCellDecorationEventArgs<Order> eventArgs)
    {
        eventArgs.CssClass += " border-0";

        if (eventArgs.FieldName == nameof(Order.Product))
        {
            if (eventArgs.RowVisibleIndex % 2 == 1)
                eventArgs.Style += " background-color: rgb(169, 148, 200); color: black;";
            else
                eventArgs.Style += " background-color: rgb(210, 198, 233); color: black;";

            if (eventArgs.DataItem.UnitsInOrder > largeOrder)
            {
                eventArgs.CssClass += " font-weight-bold";
            }
        }
    }
}
